<template>
  <div class="app-page">
    <aside-tree
      title="安检项配置"
      :tree-data="treeData"
      :loading="$loadingPlugin.getTreeData"
      @currentChange="currentChange"
      @refresh="getTreeData"
      @upDataTree="upDataTree"
    />
    <div class="content">
      <div style="margin-bottom: 10px;" class="btn-group">
        <div>
          <el-button v-permission="1" type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          <el-button v-permission="2" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        </div>
      </div>
      <lb-table
        ref="lbTable"
        v-loading="$loadingPlugin.fetchData"
        v-el-height-adaptive-table="{bottomOffset:10}"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :pagination="false"
        custom-column
        :immediate-fetch="false"
        default-open
        @fetch="fetchData"
      />
    </div>
    <AddInfo ref="addInfo" @addUpData="onSearch" />
    <EditInfo ref="editInfo" @editUpData="onSearch" />
  </div>
</template>

<script>
  import { checkNapeConfig, checkNapeConfigList, checkNapeDelete, checkNapeChangeOrder } from '@/api'
  import AsideTree from './components/ConfigTree'
  import AddInfo from './components/addInfo.vue'
  import EditInfo from './components/editInfo.vue'

  export default {
    name: 'checkItemConfig',
    components: {
      AsideTree,
      AddInfo,
      EditInfo
    },
    data() {
      return {
        treeData: [],
        itemId: '',
        tableData: {
          total: 0,
          column: [
            {
              prop: 'itemName',
              label: '安检项名称',
              width: 360
            },
            {
              prop: 'itemDetailName',
              label: '安检项明细',
              width: 460
            },
            {
              label: '操作',
              width: 160,
              align: 'center',
              fixed: 'right',
              render: (h, { row }) => {
                return (
                  <div>
                    <el-link v-permission='3' underline={false} size='mini' onClick={() => this.edit(row)}>编辑</el-link>
                    <el-link v-permission='4' underline={false} size='mini' type='danger' onClick={() => this.del(row)}>删除</el-link>
                    <el-link v-permission='5' underline={false} size='mini' onClick={() => this.moveUp(row, 1)}>上移</el-link>
                    <el-link v-permission='6' underline={false} size='mini' onClick={() => this.moveUp(row, -1)}>下移</el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
      this.getTreeData()
    },
    methods: {
      // 查询
      async onSearch() {
        await this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      // 新增
      add() {
        this.$refs.addInfo.open()
      },
      // 编辑
      edit(val) {
        this.$refs.editInfo.open(val)
      },
      // 删除
      del(val) {
        const me = this
        me.$confirm('确认删除？', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res = await checkNapeDelete({ itemDetailId: val.itemDetailId })
          console.log('res', res)
          if (res.status === 200) {
            me.$message({
              type: 'success',
              message: '删除成功!'
            })
            await this.$refs.lbTable.fetch({ currentPage: 1 })
          }
        })
      },
      // 1上移  -1下移
      async moveUp(val, type) {
        console.log('val', val)
        const res = await checkNapeChangeOrder({
          itemDetailId: val.itemDetailId,
          direction: type
        })
        console.log('res', res)
        if (res.status === 200) {
          await this.$refs.lbTable.fetch({ currentPage: 1 })
        }
      },
      async fetchData({ currentPage, pageSize }) {
        // console.log('.....', currentPage, pageSize)
        const res = await checkNapeConfigList({ itemId: this.itemId })
        this.tableData.data = res.data
      },
      // 获取安检项配置
      async getTreeData() {
        const res = await checkNapeConfig({})
        const data = res.data.map(item => ({
          label: item.itemName,
          ...item
        }))
        this.treeData = data
      },
      upDataTree() {
        this.getTreeData()
      },
      // 选择组织机构变化
      async currentChange(current) {
        this.itemId = current.itemId
        await this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  padding: 0;
  .content {
    flex: 1;
    width: 0;
    padding: 0 10px 0 10px;
  }
}
</style>
